<template>
  <view>
    <view class="money column center">
      <text>余额：</text>
      <text>{{parseFloat(balance).toFixed(2)}}币</text>
    </view>

    <view class="recharge">
      <view class="">充值：</view>
      <view class="list">
        <view :class="{hlight: index === activeIndex}" v-for="(item,index) in moneyList" :key="index" @click="clickItem(index,item)">
          <view class="">{{item}}币</view>
          <view class="">￥{{item}}</view>
        </view>
      </view>
    </view>

    <view class="desc">
      <view class="">充值说明</view>
      <view>
        1.在IOS设备的APP要进行充值后，使用虚拟币消费。<br>
        2.充值后不能在非IOS设备使用，与安卓版和网站余额不通用。<br>
        3.充值后没有使用期限，但不可提现、退换、转让和申请发票。<br>
        4.如遇无法充值、充值失败等问题，可关注[梦学谷]公众号，联系我们解决。<br>
      </view>
    </view>

    <view class="bottom center">
      <button class="btn" :loading="loading" :disabled="loading" @click="iosPayHandler">立即充值</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import api from '@/api/order.js'

  const loading = ref(false)
  const activeIndex = ref(0)
  const price = ref(0)
  const courseIds = ref([])
  const moneyList = ref([])
  const balance = ref(0) // 余额
  const applePrice = ref(0) // 充值金额

  onLoad((option) => {
    if (option.params) {
      const params = JSON.parse(option.params)
      price.value = params.price
      courseIds.value = params.courseIds
    }

    localData()

  })

  const localData = async () => {
    const {
      data
    } = await api.getUserBalance()
    balance.value = data
    
    if(price.value){
       applePrice.value = Math.ceil(Math.abs(balance.value - price.value))
    }
    
    for(let i = 0; i < 6; i++){
      moneyList.value.push(applePrice.value + i * 30)
    }
    
  }

  const clickItem = (index,item) => {
    activeIndex.value = index
    applePrice.value = item
  }

  const iosPayHandler = () => {

  }
</script>

<style lang="scss" scoped>
  .money {
    height: 288rpx;
    background-color: #345DC2;
    color: #FFFFFF;
    font-size: 88rpx;

    text:first-child {
      color: #e7e4e9;
      font-size: 30rpx;
    }
  }

  .recharge {
    margin: 20rpx 0 0 20rpx;
    font-size: 30rpx;
    color: #999;

    .list {
      margin-top: 20rpx;
      text-align: center;

      >view {
        width: 225rpx;
        float: left;
        border: 1px solid #ecedf1;
        border-radius: 10rpx;
        background-color: #fff;
        margin-right: 10rpx;
        margin-bottom: 15rpx;
        padding: 20rpx 0;
        flex-wrap: wrap;

        view:first-child {
          color: #FA140E;
          font-size: 36rpx;
        }
      }

      .hlight {
        border: 1px solid #FA140E;
      }

    }
  }



  .desc {
    clear: both;
    margin: 0 20rpx;
    font-size: 30rpx;
    line-height: 45rpx;
    color: #6e6d70;

    view:first-child {
      font-weight: bold;
      padding-top: 50rpx;
      padding-bottom: 30rpx;
    }

    view:last-child {
      padding-bottom: 120rpx;
    }
  }

  .bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background-color: #fff;
    border-top: 0.5px solid #efeff4;

    .btn {
      width: 700rpx;
      background-color: $mxg-text-color-blue;
      color: #FFF;
      border-radius: 50rpx;
      line-height: 80rpx;
      font-size: 30rpx;

      &::after {
        border: none;
      }
    }
  }
</style>
